<template>
	<view>
		<view class="top" :style="`padding-top: ${$Height() - 30}px;`">
			<view class="top_box">
				<view class="top_box_left">
					<image class="top_box_left_img" src="/static/6.png" mode=""></image>
					吉林
				</view>
				<view class="top_box_title">
					<image class="top_box_title_img" src="/static/7.png" mode=""></image>
					<input
						class="top_box_title_inp"
						type="text"
						placeholder="搜索商家/菜品"
						confirm-type="search"
						v-model="title"
						@confirm="indexlist" />
				</view>
				<view class="top_box_right" :style="`width: ${$Width() + 15}px;`"></view>
			</view>

			<view class="nav">
				<view
					class="nav_nr"
					:class="item.id == nav_id ? 'nav_nr_xz' : ''"
					v-for="(item, index) in nav_list"
					:key="index"
					@click="navclick(item.id)">
					{{ item.title }}
				</view>
			</view>

			<view class="sift">
				<view class="sift_title" @click="sift_show = !sift_show">
					<span v-if="sift_id == 1">综合排序</span>
					<span v-if="sift_id == 2" style="color: #2266f9">距离优先</span>
					<span v-if="sift_id == 3" style="color: #2266f9">距离由远到近</span>
					<span v-if="sift_id == 4" style="color: #2266f9">低价优先</span>
					<span v-if="sift_id == 5" style="color: #2266f9">高价优先</span>
					<span v-if="sift_id == 6" style="color: #2266f9">评分优先</span>
					<span v-if="sift_id == 7" style="color: #2266f9">评分由低到高</span>
					<image class="sift_title_img" src="/static/8.png" mode=""></image>
				</view>
				<view class="sift_box sift_box_1" v-if="sift_show">
					<view class="sift_box_1_nr" :class="sift_id == 1 ? 'sift_box_1_xz' : ''" @click="sift_click(1)">
						综合排序
					</view>
					<view class="sift_box_1_nr" :class="sift_id == 2 ? 'sift_box_1_xz' : ''" @click="sift_click(2)">
						距离优先
					</view>
					<!-- <view class="sift_box_1_nr" :class="sift_id == 3 ? 'sift_box_1_xz' : ''" @click="sift_click(3)">
						距离由远到近
					</view> -->
					<view class="sift_box_1_nr" :class="sift_id == 4 ? 'sift_box_1_xz' : ''" @click="sift_click(4)">
						低价优先
					</view>
					<view class="sift_box_1_nr" :class="sift_id == 5 ? 'sift_box_1_xz' : ''" @click="sift_click(5)">
						高价优先
					</view>
					<view class="sift_box_1_nr" :class="sift_id == 6 ? 'sift_box_1_xz' : ''" @click="sift_click(6)">
						评分优先
					</view>
					<!-- <view class="sift_box_1_nr" :class="sift_id == 7 ? 'sift_box_1_xz' : ''" @click="sift_click(7)">
						评分由低到高
					</view> -->
				</view>

				<view class="sift_zw" v-if="sift_show" @click="sift_click(0)"></view>
			</view>
		</view>
		<view class="con">
			<view class="con_img"></view>
			<view class="box">
				<view class="list">
					<view class="list_nr" v-for="(item, index) in list" :key="index" @click="to_gourmet_detail(item.id)">
						<image class="list_nr_img" :src="item.photo" mode=""></image>

						<view class="list_nr_box">
							<view class="list_nr_title">{{ item.title }}</view>
							<view class="list_nr_pf">
								<view class="list_nr_pf_left">
									<image
										class="list_nr_pf_left_img"
										:src="'/static/' + ttem"
										v-for="(ttem, idex) in renderRating(item.pingfen)"
										:key="idex"></image>
									<view class="list_nr_pf_left_text">{{ item.pingfen }}</view>
								</view>
								<view class="list_nr_pf_right">¥{{ item.price }}/人</view>
							</view>
							<view class="list_nr_text">
								<view class="list_nr_text_nr">{{ item.area }}</view>
								<view class="list_nr_text_nr">{{ item.juli }}km</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<TabBar :type="1" :index="3"></TabBar>
	</view>
</template>

<script setup>
	import { useCityStore } from '@/utils/cityStore.js'
	const cityStore = useCityStore()
	const http = inject('$http')
	let page = ref(1)
	let listtype = ref(true)
	let list = ref([])
	let title = ref('')
	let nav_list = ref([])

	let nav_id = ref('')
	let sift_id = ref(1)
	let sift_show = ref(false)
	let field = ref('id')
	let order = ref('desc')

	const sift_click = (id) => {
		if (id == 0) {
			sift_show.value = false
			return
		}
		switch (id) {
			case 1:
				field.value = 'id'
				order.value = 'desc'
				break
			case 2:
				field.value = 'juli'
				order.value = 'asc'
				break
			case 3:
				field.value = 'juli'
				order.value = 'desc'
				break
			case 4:
				field.value = 'price'
				order.value = 'asc'
				break
			case 5:
				field.value = 'price'
				order.value = 'desc'
				break
			case 6:
				field.value = 'pingfen'
				order.value = 'desc'
				break
			case 7:
				field.value = 'pingfen'
				order.value = 'asc'
				break

			default:
				break
		}

		indexlist()
		sift_id.value = id
		sift_show.value = false
	}
	const navclick = (id) => {
		nav_id.value = id
		indexlist()
	}
	const renderRating = (score) => {
		const stars = []
		for (let i = 1; i <= 5; i++) {
			if (score >= i - 0.5) {
				// 判断是否 >= 当前星级 - 0.5
				if (score >= i) {
					stars.push('10.png') // 满星
				} else {
					stars.push('11.png') // 半星
				}
			} else {
				stars.push('12.png') // 无星
			}
		}
		return stars
	}
	const indexlist = async () => {
		await http
			.noAuthpost('/srapi/yuangong/mslist', {
				title: title.value,
				zyflid: nav_id.value,
				city: '吉林市',
				field: field.value,
				order: order.value,
				lat: cityStore.localtion.latitude,
				lng: cityStore.localtion.longitude
			})
			.then((res) => {
				console.log('返回值', res)
				list.value = res.data
				if (nav_list.value.length < 1) {
					nav_list.value = res.fenleis
					nav_id.value = res.fenleis[0].id
				}
			})
	}

	onShow(() => {
		console.log('页面刷新')
	})
	onLoad(async (option) => {
		console.log('接收传参:', option)
		uni.showLoading({})
		await cityStore.init()
		await indexlist()
		uni.hideLoading()
	})

	const to_gourmet_detail = (id) => {
		uni.navigateTo({
			url: '/pages_A/gourmet_detail/gourmet_detail?id=' + id
		})
	}
</script>

<style lang="less" scoped>
	.top {
		width: 750rpx;
		position: sticky;
		left: 0;
		top: 0;
		z-index: 9;
		width: 750rpx;
		background: #ffe4d9;
		.top_box {
			box-sizing: border-box;
			width: 750rpx;
			position: relative;
			padding-left: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 10rpx;
			margin-bottom: 30rpx;
			.top_box_left {
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 30rpx;
				.top_box_left_img {
					width: 28rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}

			.top_box_title {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 6rpx 30rpx;
				background: #ffffff;
				border-radius: 30rpx;
				.top_box_title_img {
					width: 24rpx;
					height: 24rpx;
				}
				.top_box_title_inp {
					flex: 1;
					padding: 0 15rpx;
					font-size: 24rpx;
					font-weight: 500;
					text-align: left;
					color: #787878;
				}
			}
		}

		.nav {
			margin-bottom: 30rpx;
			position: relative;
			display: flex;
			justify-content: flex-start;
			align-items: flex-end;
			width: 100%;
			box-sizing: border-box;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch; /* 平滑滚动 */
			scrollbar-width: none; /* 隐藏滚动条 Firefox */
			padding: 0 20rpx;
			&::-webkit-scrollbar {
				display: none; /* 隐藏滚动条 Chrome/Safari */
			}

			.nav_nr {
				position: relative;
				display: block;
				z-index: 1; /* 确保文字在伪元素上方 */
				flex-shrink: 0; /* 防止项目被压缩 */
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
				margin-right: 40rpx;
				&:first-child {
					margin-left: 10rpx; /* 第一个项目左边距 */
				}
				&:last-child {
					margin-right: 0; /* 最后一个项目右边距 */
				}
			}

			.nav_nr_xz {
				font-size: 32rpx;
				font-weight: 700;
				color: #000000;
			}

			.nav_nr_xz::after {
				content: '';
				position: absolute;
				bottom: -5rpx;
				left: 5rpx;
				background-color: #55bb8a; /* 横条颜色，可调整 */
				z-index: -1;
				width: 105rpx;
				height: 10rpx;
				background: linear-gradient(#015fff 0%, rgba(1, 95, 255, 0) 100%);
				border-radius: 5rpx;
			}
		}

		.sift {
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			padding: 30rpx;
			background-color: #fff;
			.sift_title {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 24rpx;
				font-weight: 500;
				color: #000000;
				.sift_title_img {
					width: 10rpx;
					height: 6rpx;
					margin-left: 8rpx;
				}
			}

			.sift_box {
				position: absolute;
				left: 0;
				margin-top: 15rpx;
				width: 750rpx;
				background: #ffffff;
				border-radius: 24rpx;
				z-index: 5;
				box-sizing: border-box;
			}

			.sift_box_box {
				max-height: 900rpx;
				overflow-y: auto;
			}

			.sift_box_1 {
				padding: 0 30rpx;
				.sift_box_1_nr {
					padding: 30rpx 0;
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
					border-bottom: 1px solid #f1f1f1;
				}
				.sift_box_1_xz {
					font-weight: 700;
					color: #2367fa;
				}
			}

			.sift_zw {
				position: absolute;
				left: 0;
				bottom: -100vh;
				width: 750rpx;
				height: 100vh;
				background-color: rgba(000, 000, 000, 0.5);
			}
		}
	}

	.con {
		position: relative;
		min-height: 50vh;
		.con_img {
			width: 100%;
			height: 100%;
			position: absolute;
			background: linear-gradient(0deg, #f4f5f9 70%, #ffffff 100%);
		}
		.box {
			padding: 0 30rpx 30rpx;
		}
	}

	.list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 20rpx;
		.list_nr {
			width: 335rpx;
			position: relative;
			background: #ffffff;
			border-radius: 12rpx;
			.list_nr_img {
				width: 335rpx;
				height: 335rpx;
			}

			.list_nr_box {
				padding: 20rpx;
				.list_nr_title {
					white-space: nowrap; /* 禁止换行 */
					overflow: hidden; /* 隐藏超出部分 */
					text-overflow: ellipsis; /* 显示省略号 */
					font-size: 28rpx;
					font-weight: 700;
					color: #000000;
					margin-bottom: 15rpx;
				}
				.list_nr_pf {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 15rpx;
					.list_nr_pf_left {
						display: flex;
						align-items: center;
						.list_nr_pf_left_img {
							width: 24rpx;
							height: 24rpx;
							margin-right: 5rpx;
						}
						.list_nr_pf_left_text {
							font-size: 24rpx;
							font-weight: 700;
							color: #ff6634;
							margin-left: 5rpx;
						}
					}
					.list_nr_pf_right {
						font-size: 24rpx;
						font-weight: 500;
						color: #000000;
					}
				}
				.list_nr_text {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.list_nr_text_nr {
						font-size: 24rpx;
						font-weight: 500;
						color: #787878;
					}
				}
			}
		}
	}

	//
</style>
